/*
 * @Description: 热卖模块
 * @Author: kanglin
 * @Date: 2019-01-04 16:25:42
 * @Copyright: Created by Panxsoft.
 */
<style lang="less" scoped rel="stylesheet/less" type="text/less" >
    @import '~src/assets/css/common.less';
    .v-com-bestseller{
		background: #FFFFFF;
		.title-area {
			padding: 0 40*@rem-per-px;
		}
        .body{
			// background: #FFFFFF;
			-webkit-overflow-scrolling:touch;
            overflow-x: auto;
            width: 100%;
            padding-top: 16*@rem-per-px;
			padding-bottom: 32*@rem-per-px;
			margin-bottom: 16*@rem-per-px;
            .poducts{
                white-space: nowrap;
                .product-item{
                    display: inline-block;
                    margin-left: 40*@rem-per-px;
                    // &:first-child{
                    //     margin-left:0;
					// }
					&:last-child{
						margin-right: 40*@rem-per-px;
					}
                }

            }

        }
    }
</style>

<template>
	<div
		v-if="hasSetting"
		class="v-com-bestseller">
		<div class="title-area">
			<blockTitle
				:text="$t('home.bestseller')"
				@click.native="$emit('search',{ search_type: code, layout_module_id: layoutModuleId, title: $t('home.bestseller') })"/>
		</div>
		<div class="body">
			<ul class="poducts">
				<li
					v-for="item in getProducts"
					:key="item.product_id"
					class="product-item">
					<bestsellerProductPard
						:src="item.product_image"
						:title="item.product_name"
						:price="item.currency_settle_price || item.price"
						:left-symbol="item.symbol_left"
						:right-symbol="item.symbol_right"
						@click.native="handleApp('productDetail', JSON.stringify({id: item.product_id}))"
					/>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import blockTitle from 'src/views/component/title';
import bestsellerProductPard from 'src/views/component/bestseller-product-card';
import { appHandle } from 'src/views/mixins/appHandle';

/**
 * 热卖模块组件
 * @vue-prop {Object} [setting={}] 后端返回的组件数据
 * @vue-prop {String} code 组件名称
 * @vue-prop {Number} layoutModuleId 组件ID
 * @vue-computed {Boolean} hasSetting 是否有有后端的Setting数据
 * @vue-computed {Array} getProducts 商品列表
 */
export default {
	name: 'BestsellerModule',
	components: {
		blockTitle,
		bestsellerProductPard,
	},
	mixins: [appHandle],
	props: {
		setting: {
			type: Object,
			default() {
				return null;
			},
		},
		code: {
			type: String,
			required: true,
		},
		layoutModuleId: {
			type: Number,
			required: true,
		},
	},
	data() {
		return {};
	},
	computed: {
		hasSetting() {
			return !!this.setting;
		},
		getProducts() {
			return this.setting ? this.setting.best_seller_products : [];
		},
		// getTitle() {
		// 	return this.setting ? this.setting.name : null;
		// },
	},
	methods: {

	},
};
</script>

